<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{count}}
    <count_button @change_count="change"></count_button>
</div>
<template id="count_button">
    <button @click="increment">点我增加{{num}}</button>
</template>
<script type="text/javascript" src="../js/vue-2.6.12.js"></script>
<script>
    const count_button={
        template:"#count_button",
        data:function(){
            return {num:0}
        },
        methods:{
            increment(){
                this.num++;//组件数字增加了.
                this.$emit("change_count",this.num)//通知父组件改变count值
            }
        }
    }
    new Vue({
        el:"#app",
        data:{count:0},
        components:{
            count_button
        },
        methods:{
            change(num){
                this.count=num;
            }
        }
    });
</script>
</body>
</html>